redux的核心概念其實和useReducer加上useContext組合技的概念很類似，都會有一個全域的單一狀態，要改變狀態就只能使用dispatch送出一個action來對於狀態進行變更。

安裝

官方推薦直接安裝toolkit來使用redux，裡面除了有redux的核心外，還包含一些常用的工具像是建立store和reducer等，讓我們可以更容易使用rexux開發。

npm install @reduxjs/toolkit

直接使用搭配vite的template

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

簡易範例

建立初始狀態

export interface CounterState {
  value: number
  status: "idle" | "loading" | "failed"
}

const initialState: CounterState = {
  value: 0,
  status: "idle",
}

使用createSlice建立狀態和reducer

export const counterSlice = createSlice({
  name: "counter", // 命名
  initialState, //
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: { // increment、decrement和incrementByAmount是action的名稱
    increment: (state) => { // redux也有使用Immer所以也可以直接對於狀態做操作
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {//第二個參數一樣是payload
      state.value += action.payload
    },
  },
})

export action供其他元件使用

export *const* { increment, decrement, incrementByAmount } = counterSlice.actions

export useAppDispatch並且加上type

import { useDispatch } from "react-redux"
import type { AppDispatch } from "./store"

export const useAppDispatch: () => AppDispatch = useDispatch

使用

const dispatch = useAppDispatch()
<button onClick={() => dispatch(decrement())}>減</button>
<button onClick={() => dispatch(increment())}>加</button>
<button onClick={() => dispatch(incrementByAmount(10))}>加10</button>

使用時機

useReducer：

狀態管理不太複雜的小專案，狀態只有在為數不多的幾個組件之中做使用，或只是不想額外載入redux，就可以考慮直接使用React內建的useReducer+useContext組合。

redux：

在大規模的應用程式，狀態要在很多組件或是好幾頁之間管理使用，或者是需要用到middleware等進階功能，就可以使用redux。

個人使用選擇

我在React的狀態管理選擇上，自從有了useReducer和useContext我幾乎都是直接使用這個組合，主要原因是不需要多載入redux，再者我的專案通常也沒有到超級大的規模，你是怎麼選擇使用歡迎分享。

參考

https://redux.js.org/introduction/getting-started
https://www.frontendmag.com/tutorials/usereducer-vs-redux/